<template>
  <div style="margin-left: 300px; margin-right: 200px">
    <a-layout>
      <a-layout-header id="header">
        <a-typography-title :heading="2"
          >{{ questionData?.title }}
        </a-typography-title>
        <a-typography-title :heading="5"
          ><a-tag
            v-for="e in questionData?.tagList"
            :key="e"
            color="arcoblue"
            style="margin-right: 10px"
            >{{ e }}</a-tag
          >
        </a-typography-title>
      </a-layout-header>
      <div v-show="questionData?.answer">
        <br />
        <hr />
        <br />
      </div>
      <a-layout-content>
        <MdViewer :value="questionData?.answer"></MdViewer>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import MdViewer from "@/components/MdViewer.vue";
import { onMounted, ref } from "vue";
import { QuestionControllerService } from "../../../generated";
import { useRoute, useRouter } from "vue-router";

const questionData = ref();
const route = useRoute();

onMounted(() => {
  QuestionControllerService.getQuestionVoByIdUsingGet(route.query["id"]).then(
    (res) => {
      questionData.value = res.data;
    }
  );
});
</script>

<style scoped></style>
